<template>
  <div>
    <el-timeline>
      <el-timeline-item
        timestamp="下载模版 (模版1对应对应第一个要上传的文件)"
        placement="top"
      >
        <el-card>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-button
                type="primary"
                round
                icon="el-icon-download"
                @click="exportDocumentOne"
              >同行链接模版
              </el-button>
            </el-col>
<!--            <el-col :span="8">-->
<!--              <el-button-->
<!--                type="primary"-->
<!--                round-->
<!--                icon="el-icon-download"-->
<!--                @click="exportDocumentTwo"-->
<!--              >店铺商品信息模版-->
<!--              </el-button>-->
<!--            </el-col>-->
          </el-row>

        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="上传同行链接 + 价格" placement="top">
        <el-card>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="店铺子账号：" class="el-col-8">
              <el-input v-model="formInline.tbAccount" placeholder="注意填写同一个子账号" clearable/>
            </el-form-item>
            <el-form-item label="同行链接 + 价格：" class="el-col-5">
              <el-upload
                class="upload"
                ref="upload"
                action="string"
                :file-list="fileList"
                :on-change="handleChange"
                :auto-upload="false"
                :limit="1"
                multiple="multiple"
              >
                <el-button
                  slot="trigger"
                  size="small"
                  type="primary"
                  @click="delFile"
                >选取文件
                </el-button>
              </el-upload>
            </el-form-item>
            <el-form-item class="el-col-2">
              <el-button size="small" type="primary" @click="getTBDiscount">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="本店铺的链接" placement="top">
        <el-card>
          <el-form :inline="true" :model="formInlineThree" class="demo-form-inline">
            <el-form-item label="店铺子账号：" class="el-col-8">
              <el-input v-model="formInlineThree.tbAccount" placeholder="注意填写同一个子账号" clearable/>
            </el-form-item>
            <el-form-item label="本店铺导出的商品文件：" class="el-col-5">
              <el-upload
                class="upload"
                ref="upload"
                action="string"
                :file-list="fileListThree"
                :on-change="handleChangeThree"
                :auto-upload="false"
                :limit="8"
                multiple="multiple"
              >
                <el-button
                  slot="trigger"
                  size="small"
                  type="primary"
                  @click="delFileThree"
                >选取文件
                </el-button>
              </el-upload>
            </el-form-item>
            <el-form-item class="el-col-2">
              <el-button size="small" type="primary" @click="getTBDiscountThree">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <!-- 在上货软件的链接有此链接 但是 上传的同行链接 + 价格 当中没有-->
    <el-dialog
      :title="stepTwoTitle"
      :visible.sync="isStepTwoDisplay"
      @close="clearForm"
    >
      <span>{{ stepTwoInfo }}</span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      userForm: {
        tbLink: '',
        priceLink: '',
        name: ''
      },
      stepTwoTitle: '响应信息',
      isStepTwoDisplay: false,
      stepTwoInfo: '',
      editInfo: false,
      total: 0,
      fileList: [],
      fileListTwo: [],
      fileListThree: [],
      formInline: {
        formData: '',
        tbAccount: ''
      },
      formInlineTwo: {
        formData: '',
        tbAccount: '',
        field: ''
      },
      formInlineThree: {
        formData: '',
        tbAccount: ''
      },
      displayNoSkuGoodsId: false,
      formLabelWidth: '20px',
      goodsIds: '',
      options: [{
        value: 'DIAN_QV',
        label: '电趣'
      }, {
        value: 'QUN_YING_HUI',
        label: '群英会'
      }]
    }
  },
  created() {
  },
  methods: {
    getTBDiscount() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      const hasToken = getToken()
      formData.append('file', this.fileList[0].raw)
      formData.append('tbAccount', this.formInline.tbAccount)
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/discountStepNewOne', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          'X-Token': hasToken
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          // 成功提示
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: aaa,
            type: 'warning'
          })
        }
      })
    },
    getTBDiscountTwo() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      const hasToken = getToken()
      formData.append('file', this.fileListTwo[0].raw)
      formData.append('tbAccount', this.formInlineTwo.tbAccount)
      formData.append('field', this.formInlineTwo.field)
      if (this.fileListTwo.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/discountStepTwo', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          'X-Token': hasToken
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          // 成功提示
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        } else {
          // this.stepTwoInfo = aaa
          // this.isStepTwoDisplay = true
          this.$message({
            message: aaa,
            type: 'warning',
            dangerouslyUseHTMLString: true
          })
        }
      })
    },
    getTBDiscountThree() {
      // eslint-disable-next-line no-unused-vars
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // eslint-disable-next-line no-unused-vars
      const hasToken = getToken()
      const formData = new FormData()
      // formData.append('file', this.fileListThree)
      for (var i = 0; i < this.fileListThree.length; i++) {
        formData.append('file', this.fileListThree[i].raw)
      }
      formData.append('tbAccount', this.formInlineThree.tbAccount)
      if (this.fileListThree.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/discountStepNewThree', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8',
          'X-Token': hasToken
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          console.log(res.data.data)
          // 发起下载的请求
          this.download(res.data.data)
          if (aaa === '成功') {
            // 展示失败的goodsId 没有SKU_ID
            this.$message({
              message: '成功：' + aaa,
              type: 'success'
            })
          } else {
            this.displayNoSkuGoodsId = true
            this.goodsIds = aaa
          }
        } else {
          // this.dialogFormVisible = true
          // this.againLinks = aaa
          this.$message({
            message: '错误信息：' + aaa,
            type: 'warning'
          })
        }
      })
    },

    // 点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击文件
    handlePreview(file) {
      console.log(file)
    },
    // 第二步骤的文件
    delFileTwo() {
      this.fileListTwo = []
    },
    handleChangeTwo(file, fileList) {
      this.fileListTwo = fileList
    },
    // 第三步骤的文件
    delFileThree() {
      this.fileListThree = []
    },
    handleChangeThree(file, fileList) {
      this.fileListThree = fileList
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增链接'
      }
      this.editInfo = true
      this.userForm.name = this.name
    },
    download(filePath) {
      this.downloadA('http://101.201.64.236:9999/prod-api/tb/discountDownload?filePath=' + filePath)
    },
    exportDocument(filePath) {
      this.downloadA('http://101.201.64.236:9999/prod-api/tb/exportDocument?filePath=' + filePath)
    },
    exportDocumentOne() {
      const filepath = '/data/file/同行链接模版.xlsx'
      // const filepath = '/Users/mac/Documents/work/BI-Back/src/main/resources/dataTest.xlsx'
      this.exportDocument(filepath)
    },
    exportDocumentTwo() {
      const filePath = '/data/file/店铺商品信息模版.xlsx'
      this.exportDocument(filePath)
    },
    downloadA(url) {
      const a = document.createElement('a')
      a.href = url
      a.hidden = true
      // a.target = "_blank";
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value1: '',
        value2: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style>
el-input {
  width: 100px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}

.blue-link {
  color: blue;
}

</style>
